<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box1">
        <div class="box1-1">
            播放列表...
        </div> 
        <div class="box2">
            <div class="xx">11</div>
            <div class="xx">22</div>
            <div class="xx">33</div>
            <div class="xx">44</div>
            <div class="xx">55</div>
        </div>
    </div>
</body>
</html>
<script>
    var p=document.querySelector(".box1-1")
    var box=document.querySelector(".box2")
    console.log(p) 
    var flag=false
    p.onclick=function(){
        console.log(this)
        flag=!flag 
        console.log(flag)
        box.style.display= flag ?  'block'  :'none' 
    }
</script>
<style>
    .box1{
       width: 200px;
       display: flex;
       flex-direction: column;
     
    }
    .box1-1{
        width: 200px;
       height: 30px;
       line-height: 30px;
        border-bottom: 1px solid black;
        background-color: hotpink;
    }
    .box2{
        width: 200px;
       height: 173px;
       background-color: cornflowerblue;
       display: none;
       border-bottom: 1px solid black;
    }
    .xx{
        line-height: -10px;
        height: 30px;
        line-height: 30px;
    }
    .xx:hover{
        background-color: white;
    }
</style>